<template>
  <div class="wai">
    <div class="logo">
      <img src="../../assets/img/Register/logo1.png">

    </div>
    <div class="span_inpnt">
        <div class="input">
          <div class="input_text"><input type="number" v-model="phone" placeholder="请输入手机号"></div>
        </div>
        <hr class="input_hr"/>
         <div class="input">
          <div class="input_text"><input type="password" v-model="password" placeholder="请输入密码"></div>
        </div>
        <hr class="input_hr"/>
    </div>
    <div class="btn" @click="handleLogin">登录</div>
    <router-link :to="{path:'/Register'}">
      <div class="div_tishi_text">注册账号</div>
    </router-link>


    <div class="div_tishi_xian">|</div>
     <router-link :to="{path:'/Wjmm'}">
      <div class="div_tishi_text">忘记密码</div>
    </router-link>

    <div class="div_weixin_text">使用以下方式登录</div>
    <div class="div_weixin_btn" @click="handleWechatLogin"><img src="../../assets/img/Register/weixin.png"></div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'Login',
  data () {
    return {
      phone:'',
      password:''
     }
  },
  mounted () {

    if(this.$store.state.show){
      this.$router.push({path: '/'});
    }
  },
  methods: {
    handleWechatLogin(){
      window.location.href="/wechat/authorize"
    },
    handleJiaoyan(){
      if(this.phone === ''){
        this.$Message.success("请输入账号");
        return false;
      }else if(this.password === ''){
        this.$Message.success("请输入密码");
        return false;
      }else{
        return true
      }
    },
    handleLogin () {
      console.log('localStorage.getItem("name")==', localStorage.getItem("name"))
      if(this.handleJiaoyan()){
         axios.post('/web/api/user/baselogin',{"password":this.password,"phone":this.phone}).then(this.handleLoginInfoSucc)
      }
    },
    handleLoginInfoSucc (res) {
      console.log(res)
      var data = res.data
      console.log('data============', data)
      var user = res.data.date
      console.log('user============', user)
      this.$Message.success(data.message);
      if(data.code==1){
        this.$store.state.user = user;
        console.log('存储的user', this.$store.state.user)
        this.$store.state.show = true;
        localStorage.setItem("store",JSON.stringify(this.$store.state))
        this.$router.push({path: '/'});
      }else{
        return
      }
      console.log(res)
    }
  }
}
</script>
<style lang="stylus" scoped>
  .wai
    width 100%
    .logo
      width 100%
      height 15rem
      text-align center
      img
        width 100%
        height 15rem
    .span_inpnt
      width 95%
      margin-left 2.5%
      height 12rem
      text-align center
      padding-top 0.1rem
      border-radius 2rem
      .input
        margin-left 5%
        margin-top 1rem
        height 4rem
        width 90%
        text-align center
        background #fff
        border-radius 0.2rem
        .input_text
          margin-left 2rem
          margin-top 0.5rem
          float left
          width 4rem
          height 3rem
          input
            width 17rem
            height 3rem
            border none
            outline none
            color  #b3b3b3
    .input_hr
      margin-left 10%
      width 80%
      height:1px
      border:none
      border-top:1px solid #b3b3b3
    .btn
      margin-top 2rem
      margin-left 10%
      width 80%
      height 2.8rem
      background #3b83c5 url(../../assets/img/Register/login_btn.png) no-repeat 100% 100%
      text-align center
      line-height 2.8rem
      color #ffffff
      border-radius 2rem
    .div_tishi_text
      float left
      width 49%
      text-align center
      height 3rem
      line-height 3rem
    .div_tishi_xian
      float left
      width 2%
      text-align center
      height 3rem
      line-height 3rem
      color #b3b3b3
    .div_weixin_text
      width 100%
      height 3rem
      text-align center
      line-height 3rem
      color #b3b3b3
    .div_weixin_btn
      margin-top 4rem
      width 100%
      text-align center
      line-height 10rem
      img
        width 5rem
        height 5rem


</style>

